// 电表设备
import img6 from "@/assets/images/iot/device/6.png";
import { ElImage } from "element-plus";
import { dayjs } from "element-plus";
import electricity from "@/assets/images/iot/snapshot/6.png";
import "./index.scss";
import ProTable from "@/components/ProTable/index.vue";
import { getHistoryDataList } from "@/api/modules/iot/data";
import { getProfile } from "@/api/modules/model/profile";
import { sendFunc } from "@/api/modules/iot/device";
import { showMsg } from "@/utils/util";
import BaseMap from "@/components/Map/antvl7/BaseMap";
import gpsConvert from "@/utils/gps-convert";
import mittBus from "@/utils/mittBus";
const Lock = defineComponent({
	name: "Lock", // 动态引入需要
	label: "电子锁", // 动态引入需要
	image: electricity, // 动态引入需要
	props: {
		detail: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	setup(props) {
		const data = reactive({
			dateHuman: [dayjs().subtract(7, "d"), dayjs()],
			details: {} as any,
			lockState: "",
			devState: "",
			leverState: "",
			location: {}
		});
		let map = ref();
		onMounted(() => {
			// init();
		});
		mittBus.on("clickRefresh", () => {
			init();
		});
		onBeforeUnmount(() => {
			mittBus.off("clickRefresh");
		});
		const init = async () => {
			if (props.detail.sn) {
				const listRes: any = await getProfile({
					idSn: props.detail.sn
				} as any);
				data.details = listRes.result.profile.sensor;
				let hexValue = data.details.statusDec
					? decToHex(data.details.statusDec.toString(2), 32).split("").reverse().join("")
					: "";
				data.devState = hexValue.slice(6, 7);
				data.lockState = hexValue.slice(14, 15);
				data.leverState = hexValue.slice(15, 16);
				let gcjPt = gpsConvert.bd_decrypt(data.details.latitude, data.details.longitude);
				nextTick(() => {
					data.location = { lat: gcjPt.lat, lng: gcjPt.lon };
					map.value.initMarker({ location: data.location }, true);
				});
			}
		};

		const proTable = ref();
		const columns = ref<any>([
			{ prop: "eventId", label: "事件ID" },
			{ prop: "eventName", label: "事件名称" },
			{ prop: "eventType", label: "事件类型" },
			// { prop: "eventContent", label: "事件内容" },
			{ prop: "updateTime", label: "时间" }
		]);
		const initParam = reactive({
			idSn: props.detail.sn,
			key: "addEventInfo",
			keyType: "sensor",
			value: "",
			startTime: dayjs(data.dateHuman[0]).format("YYYY-MM-DD 00:00:00"),
			endTime: dayjs(data.dateHuman[1]).format("YYYY-MM-DD 23:59:59"),
			timeOrder: "desc"
		});
		const dataCallback = (data: any) => {
			return {
				datalist: data.records,
				total: data.total || 0,
				pageIndex: data.current,
				pageSize: data.size
			};
		};
		const getTableList = async (params: any) => {
			return getHistoryDataList({ ...params });
		};
		const decToHex = (num: number, len: number) => {
			let hex = num ? num.toString(2) : "";
			//自动补0
			if (len) {
				while (hex.length < len) hex = "0" + hex;
			}
			return hex;
		};
		const setLock = (type: boolean) => {
			sendFunc({
				idSn: props.detail.sn,
				funcName: "lock",
				data: {
					input: type ? "lock" : "unlock"
				}
			}).then((res: any) => {
				showMsg(res.message, res.code == 200);
			});
		};

		return () => {
			return (
				<div class="flex flex-wrap electricity">
					<div class="access-item" style={"overflow: hidden;"}>
						<ElImage src={img6} class="h-full w-full" fit="scale-down" style="height: calc(100% - 44vh)" />
						<BaseMap ref={map} style="height:40vh" editerMarker detail={{ location: data.location }} onInit={init} />
					</div>
					<div class="access-item">
						<div class="bg-white d-item">
							<div class="page-title justify-between flex flex-grow-0">设备基本信息</div>
							<div class="bckColor">
								<div class="left"></div>
								<div class="right"></div>
							</div>
							<div class="flex items-center" style="margin-top: 20px">
								<el-descriptions column="2" size="large" class="w-full">
									<el-descriptions-item label="设备名称:">{props.detail.name}</el-descriptions-item>
									<el-descriptions-item label="设备SN:">{props.detail.sn}</el-descriptions-item>
									<el-descriptions-item label="产品型号:">{props.detail.productModel}</el-descriptions-item>
									<el-descriptions-item label="定位时间:">{data.details.time}</el-descriptions-item>
									{/* <el-descriptions-item label="报警状态:">{data.details.alarmInfo}</el-descriptions-item> */}
									<el-descriptions-item label="锁状态:">
										<el-tag class="mr-2" type={data.lockState == "0" ? "danger" : "success"}>
											{data.lockState == "0" ? "解封" : "施封"}
										</el-tag>
										<el-tag type={data.leverState == "0" ? "danger" : "success"}>
											{data.leverState == "0" ? "锁杆开" : "锁杆关"}
										</el-tag>
									</el-descriptions-item>
									<el-descriptions-item label="设备状态:">
										<el-tag type={data.devState == "0" ? "danger" : "success"}>{data.devState == "0" ? "运动" : "静止"}</el-tag>
									</el-descriptions-item>
									<el-descriptions-item label="信号:">{data.details.addDataInfo?.csq}</el-descriptions-item>
								</el-descriptions>
							</div>
							<div class="flex mt-2">
								<el-button
									type="primary"
									onClick={() => {
										setLock(false);
									}}
								>
									解封
								</el-button>
								<el-button
									onClick={() => {
										setLock(true);
									}}
								>
									施封
								</el-button>
							</div>
						</div>
						<div class="bg-white d-item" style="height:43vh">
							<div class="page-title justify-between flex">事件列表</div>
							<div class="bckColor">
								<div class="left"></div>
								<div class="right"></div>
							</div>
							<el-form inline class="mt-5">
								<el-form-item label="事件">
									<el-select clearable v-model={initParam.value}>
										<el-option label="全部事件" value="" />
										<el-option label="报警事件" value="报警事件" />
										<el-option label="普通事件" value="普通事件" />
									</el-select>
								</el-form-item>
								<el-form-item label="">
									<el-date-picker type="daterange" v-model={data.dateHuman} />
								</el-form-item>
								<el-form-item>
									<el-button
										type="primary"
										onClick={() => {
											initParam.startTime = dayjs(data.dateHuman[0]).format("YYYY-MM-DD 00:00:00");
											initParam.endTime = dayjs(data.dateHuman[1]).format("YYYY-MM-DD 23:59:59");
											proTable.value.getTableList();
										}}
									>
										搜索
									</el-button>
								</el-form-item>
							</el-form>
							<div style="height:35vh">
								<ProTable
									ref={proTable}
									showHeader={false}
									columns={columns}
									initParam={initParam}
									title={""}
									requestApi={getTableList}
									dataCallback={dataCallback}
								>
									{{
										eventName: (scope: any) => {
											return <div>{scope.row.value.eventName}</div>;
										},
										eventType: (scope: any) => {
											return <div>{scope.row.value.eventType}</div>;
										},
										eventContent: (scope: any) => {
											return <div>{scope.row.value.eventContent}</div>;
										},
										eventId: (scope: any) => {
											return <div>{scope.row.value.eventId}</div>;
										}
									}}
								</ProTable>
							</div>
						</div>
					</div>
				</div>
			);
		};
	}
});
export default Lock;
